<template>
  <!--使用css封装动画-->
  <!--<transition>-->
    <!--&lt;!&ndash;slot里是从父组件传过来的dom结构&ndash;&gt;-->
    <!--<slot v-if="show"></slot>-->
  <!--</transition>-->

  <!--使用js动画封装-->
  <transition
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter"
  >
    <!--slot里是从父组件传过来的dom结构-->
    <slot v-if="show"></slot>
  </transition>
</template>

<script>
  import Velocity from '../assets/js/velocity.min';
    export default {
      name: "anim",
      props:['show'], //从父组件传过来的变量，用于判断显示与否
      methods:{
        handleBeforeEnter:(el)=>{
          el.style.opacity=0;
        },
        handleEnter:(el,callback)=>{
          Velocity(
            el,        //执行动画的元素
            {opacity:1},  //动画内容
            {
              duration:1000,  //执行动画时长
              complete:callback   //执行动画之后的操作，
            }
          )
        },
        handleAfterEnter:(el)=>{
          console.log('动画结束');
        },
      }
    }
</script>

<style scoped>
  .v-enter,
  .v-leave-to{
    opacity: 0;
  }
  .v-enter-active,
  .v-leave-active{
    transition: opacity 1s;
  }
</style>
